<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lexicon Info Systems</title>
<meta name="keywords" content="aquatic theme, portfolio, free templates, website templates, CSS, HTML" />
<meta name="description" content="Aquatic Theme, Portfolio, free CSS template by templatemo.com" />
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">

ddsmoothmenu.init({
	mainmenuid: "templatemo_menu", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

<!--////// CHOOSE ONE OF THE 3 PIROBOX STYLES  \\\\\\\-->
<link href="css_pirobox/white/style.css" media="screen" title="shadow" rel="stylesheet" type="text/css" />
<!--<link href="css_pirobox/white/style.css" media="screen" title="white" rel="stylesheet" type="text/css" />
<link href="css_pirobox/black/style.css" media="screen" title="black" rel="stylesheet" type="text/css" />-->
<!--////// END  \\\\\\\-->

<!--////// INCLUDE THE JS AND PIROBOX OPTION IN YOUR HEADER  \\\\\\\-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/piroBox.1_2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$().piroBox({
			my_speed: 600, //animation speed
			bg_alpha: 0.5, //background opacity
			radius: 4, //caption rounded corner
			scrollImage : false, // true == image follows the page, false == image remains in the same open position
			pirobox_next : 'piro_next', // Nav buttons -> piro_next == inside piroBox , piro_next_out == outside piroBox
			pirobox_prev : 'piro_prev',// Nav buttons -> piro_prev == inside piroBox , piro_prev_out == outside piroBox
			close_all : '.piro_close',// add class .piro_overlay(with comma)if you want overlay click close piroBox
			slideShow : 'slideshow', // just delete slideshow between '' if you don't want it.
			slideSpeed : 4 //slideshow duration in seconds(3 to 6 Recommended)
	});
});
</script>
<!--////// END  \\\\\\\-->

</head>
<body>

<div id="templatemo_wrapper">

	<div id="templatemo_header">
    	
        <div id="site_title"><img src="images/logo.png"/></div>
        
        <div id="templatemo_menu" class="ddsmoothmenu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a>
               </li>
                <li><a href="portfolio.html" class="selected">Portfolio</a>
                    <ul>
                    	<li><a href="http://www.templatemo.com/page/1">Sub menu 1</a></li>
                        <li><a href="http://www.templatemo.com/page/2">Sub menu 2</a></li>
                        <li><a href="http://www.templatemo.com/page/3">Sub menu 3</a></li>
                    </ul>
                </li>
                <li><a href="services.html">Services</a>
                    <ul>
                    	<li><a href="#">Software Consultancy</a></li>
                        <li><a href="#">Bespoke Solutions</a></li>
                        <li><a href="#">Product Development</a></li>
                    </ul>
                </li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
            <br style="clear: left" />
        </div> <!-- end of templatemo_menu -->
        <div class="cleaner"></div>
    </div> <!-- end of templatemo header -->
    
    <div id="templatemo_middle">
		<div id="mid_title">
                Web Design Portfolio</div>
        <p> Integer adipiscing massa sed enim egestas ut pretium dolor scelerisque. Aliquam nulla orci, tincidunt eu gravida adipiscing, facilisis in erat. Phasellus tortor nulla, venenatis sed eleifend id, sodales vitae tortor. Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow"><strong>XHTML</strong></a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow"><strong>CSS</strong></a>.</p>
        
        <div id="learn_more"><a href="#">Learn More</a></div>
        <div class="cleaner"></div>
	</div> <!-- end of middle -->
    
    <div id="templatemo_main">
    	
        <div id="gallery">
        	<div class="gallery_box">
                <a class="pirobox" href="images/gallery/image_01_b.jpg" title="Nunc elit ligula, eleifend posuere facilisis nec risus.">
				<img width="300" height="150" src="images/gallery/image_01.jpg" alt="Image 01" class="image_wrapper" />
                </a>
                <div class="gl_box">
	                <a href="#" class="more float_l">Visit</a>
    	            <a href="#" class="more float_r">Detail</a>
                    <div class="cleaner"></div>
				</div>
                <div class="cleaner"></div>
			</div>
            <div class="gallery_box">
                <a class="pirobox" href="images/gallery/image_02_b.jpg" title="Morbi vitae turpis eu urna dictum egestas eu nec magna.">
                    <img src="images/gallery/image_02.jpg" alt="Image 02" class="image_wrapper" />
                </a>
                <div class="gl_box">
	                <a href="#" class="more float_l">Visit</a>
    	            <a href="#" class="more float_r">Detail</a>
                    <div class="cleaner"></div>
				</div>
                <div class="cleaner"></div>
			</div>
            <div class="gallery_box gb_lmb">
                <a class="pirobox" href="images/gallery/image_03_b.jpg" title="Vestibulum fringilla cursus mi eu dignissim.">
                    <img src="images/gallery/image_03.jpg" alt="Image 03" class="image_wrapper" />
                </a>
                <div class="gl_box">
	                <a href="#" class="more float_l">Visit</a>
    	            <a href="#" class="more float_r">Detail</a>
                    <div class="cleaner"></div>
				</div>
                <div class="cleaner"></div>
			</div>
            <div class="gallery_box">
                <a class="pirobox" href="images/gallery/image_04_b.jpg" title="Nam tristique odio eget dolor aliquet pulvinar.">
	                <img src="images/gallery/image_04.jpg" alt="Image 04" class="image_wrapper" />
                </a>
                <div class="gl_box">
	                <a href="#" class="more float_l">Visit</a>
    	            <a href="#" class="more float_r">Detail</a>
                    <div class="cleaner"></div>
				</div>
                <div class="cleaner"></div>
			</div>
            <div class="gallery_box">
                <a class="pirobox" href="images/gallery/image_05_b.jpg" title="Duis at dolor at leo imperdiet malesuada nec vitae nunc.">
                	<img src="images/gallery/image_05.jpg" alt="Image 05" class="image_wrapper" />
                </a>
                <div class="gl_box">
	                <a href="#" class="more float_l">Visit</a>
    	            <a href="#" class="more float_r">Detail</a>
                    <div class="cleaner"></div>
				</div>
                <div class="cleaner"></div>
			</div>
            <div class="gallery_box gb_lmb">
                <a class="pirobox" href="images/gallery/image_06_b.jpg" title="Proin a odio in diam luctus faucibus.">
                <img src="images/gallery/image_06.jpg" alt="Image 06" class="image_wrapper" />
                </a>
                <div class="gl_box">
	                <a href="#" class="more float_l">Visit</a>
    	            <a href="#" class="more float_r">Detail</a>
                    <div class="cleaner"></div>
				</div>
                <div class="cleaner"></div>
			</div>
        </div>  
    	
    	<div class="cleaner"></div>
    </div> <!-- end of main -->

</div> <!-- wrapper -->

<div id="templatemo_footer_wrapper">

	<div id="templatemo_footer">
    	Copyright © 2013-2014 <a href="#">Lexcion Info Systems</a> | Designed by Lexcion Info Systems
        <div class="cleaner"></div>
	</div>
    
</div>

</body>
</html>